import React , {useState} from 'react';
import './index.less'

const Shoucang = () => {
    let [status , setStatus] = useState(true)
    let [shu,setShu] = useState(1)
    let list = [
        {id:1,title:'价格与供给之间呈同方向编号的关系是指（   ）。',lai:'第1章市场需求、供给看到客人福晶科技',time:'2021-05-21 22：00：01'},
        {id:2,title:'价格与供给之间呈同方向编号的关系是指（   ）。',lai:'第1章市场需求、供给看到客人福晶科技',time:'2021-05-21 22：00：01'},
        {id:3,title:'价格与供给之间呈同方向编号的关系是指（   ）。',lai:'第1章市场需求、供给看到客人福晶科技',time:'2021-05-21 22：00：01'},
        {id:4,title:'价格与供给之间呈同方向编号的关系是指（   ）。',lai:'第1章市场需求、供给看到客人福晶科技',time:'2021-05-21 22：00：01'},
        {id:5,title:'价格与供给之间呈同方向编号的关系是指（   ）。',lai:'第1章市场需求、供给看到客人福晶科技',time:'2021-05-21 22：00：01'},
    ]
    let list2 = [
        {id:1,title:'第1章 市场需求、供给与均衡价格'},
        {id:2,title:'第2章 消费者行为分析'},
        {id:3,title:'第3章 生产及成本理论'},
    ]

    return <div className='shoucangbox'>
        <div className='header'>
            <div className='topbox'>
                <img src={require('../../../../public/wzcimg/向左箭头.svg')} alt="" />
                <span>我的收藏</span>
            </div>
            <div className='bottombox'>
                <span className={status ? 'span left16' : 'span'} onClick={()=>setStatus(true)}>最新收藏</span>
                <span className={status ? 'span' : 'span left16'} onClick={()=>setStatus(false)}>全部收藏</span>
            </div>
        </div>
        {
            status ? 
            <div className='conbox'>
                {list.map(item=>{
                    return <div key={item.id} className='conddbox'>
                        <div>
                            <span>{item.title}</span>
                        </div>
                        <div className='werbox'>
                            <span>来源：{item.lai}</span>
                            <span>{item.time}</span>
                        </div>
                    </div>
                })}
            </div>
            :
            <div className='conkkbox'>
                <div className='jjbox'>
                    <span className={shu == 1 ? 'll pp' : 'll'} onClick={()=>setShu(1)}>章节练习</span>
                    <span className={shu == 2 ? 'll pp' : 'll'} onClick={()=>setShu(2)}>历年真题</span>
                    <span className={shu == 3 ? 'll pp' : 'll'} onClick={()=>setShu(3)}>模拟测试</span>
                    <span className={shu == 4 ? 'll pp' : 'll'} onClick={()=>setShu(4)}>押题密集</span>
                </div>
                <div>
                    {shu == 1 ? <div>
                        {list2.map(item=>{
                            return <div key={item.id} className='laks'>
                                <span>{item.title}</span>
                                <img src={require('../../../../public/wzcimg/更多.svg')} alt="" />
                            </div>
                        })}
                    </div> : ''}
                    {shu == 2 ? <div className='jiji2'>
                        <span>2020年中级经济师《经济基础知识》真题（11月4日下午</span>
                    </div> : ''}
                    {shu == 3 ? <div className='jiji2'>
                        <span>2020年中级经济师《经济基础知识》真题（11月4日下午</span>
                    </div> : ''}
                    {shu == 4 ? <div className='jiji2'>
                        <span>2020年中级经济师《经济基础知识》真题（11月4日下午</span>
                    </div> : ''}
                </div>
            </div>
        }
    </div>;
}

export default Shoucang;